<template>
  <div style="height: 400px" ref="homeLineRef"></div>
</template>

<script setup name="line_rotate">
import * as echarts from 'echarts';

const props = defineProps({
  line_x: {
    type: Array,
    default: () => [],
  },
  lineData: {
    type: Array,
    default: () => [],
  },
});
// 引入组件
const homeLineRef = ref();
let line;
//柱状图
const initLineChart = () => {
  line = markRaw(echarts.init(homeLineRef.value, ''));
  const option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },

    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: props.line_x,
        axisLabel: {
          interval: 0, // 强制显示所有文字
          rotate: 30, // 文字倾斜角度
          margin: 40, // 文字和轴线之间的距离
          textStyle: {
            align: 'center', // 文字水平对齐方式
            baseline: 'top', // 垂直方向上的基准线位置
            lineHeight: 30 // 设置标签文字的行高

          }
        }
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: props.lineData,
  };
  line.setOption(option);
};

onMounted(() => {
  nextTick(()=> {
    initLineChart();
  });
});
</script>
